<template>
  <div class="all">
    <div id="cmain">
      <div id="mainLeft">
        <el-collapse v-model="totalAssets">
          <el-collapse-item title="总资产" name="1">
            <div>{{balance}} USDT</div>
          </el-collapse-item>
        </el-collapse>
        <!-- <el-table @row-click="getRow" height="500" :data="list" style="width: 100%">
          <el-table-column prop label="交易对" width="100">
            <template slot-scope="scope">
              <span style="color:#fff">{{scope.row.name}}</span>
            </template>
          </el-table-column>
        </el-table>-->
        <ul class="lines">
          <li class="titles">
            <span style="width:50%;display:inline-block">项目</span>
            <span>当前价格</span>
          </li>
          <li
            @click="getRow(v,i)"
            :class="[linesColor==i?'white':'']"
            v-for="(v,i) in list"
            :key="i"
          >
            <span style="width:50%;display:inline-block">{{v.name}}</span>
            <span>
              {{v.tradeCode=="BTCUSDT"?BTCUSDT:''}}
              {{v.tradeCode=="ETHUSDT"?ETHUSDT:''}}
              {{v.tradeCode=="LTCUSDT"?LTCUSDT:''}}
              {{v.tradeCode=="HS300"?HS300USDT:''}}
              {{v.tradeCode=="IC500"?IC500USDT:''}}
            </span>
          </li>
        </ul>

        <div class="introduction">
          <p v-if="linesColor=='0'">
            BTC (比特币)
            比特币（Bitcoin，简称BTC）是目前使用最为广泛的一种数字货币，它诞生于2009年1月3日，是一种点对点（P2P）传输的数字加密货币，总量2100万枚。比特币网络每10分钟释放出一定数量币，预计在2140年达到极限。比特币被投资者称为“数字黄金”。比特币依据特定算法，通过大量的计算产生，不依靠特定货币机构发行，其使用整个P2P网络中众多节点构成的分布式数据库来确认并记录所有的交易行为，并使用密码学设计确保货币流通各个环节安全性，可确保无法通过大量制造比特币来人为操控币值。基于密码学的设计可以使比特币只能被真实拥有者转移、支付及兑现。同样确保了货币所有权与流通交易的匿名性。
            比特币因去中心化、全球流通、低交易费用 、匿名流通等特点，备受科技爱好者青睐。近来华尔街、多国央行等传统金融机构开始研究比特币区块链技术，日本政府正式承认比特币为法定支付方式，越来越多的日本商家接受了比特币支付。
          </p>
          <p v-if="linesColor=='1'">
            以太坊（Ethereum）是下一代密码学账本，可以支持众多的高级功能，包括用户发行货币，智能协议，去中心化的交易和设立去中心化自治组织(DAOs)或去中心化自治公司（DACs）。以太坊并不是把每一单个类型的功能作为特性来特别支持，相反，以太坊包括一个内置的图灵完备的脚本语言，允许通过被称为“合同”的机制来为自己想实现的特性写代码。一个合同就像一个自动的代理，每当接收到一笔交易，合同就会运行特定的一段代码，这段代码能修改合同内部的数据存储或者发送交易。高级的合同甚至能修改自身的代码。
            通俗一点说，以太坊是开源平台数字货币和区块链平台，它为开发者提供在区块链上搭建和发布应用的平台。以太坊可以用来编程、分散、担保和交易任何事物，投票、域名、金融交易所，众筹、公司管理、合同和大部分的协议、知识产权，还有得益于硬件集成的智能资产。
            2017年2月28日，一批代表着石油、天然气行业，金融行业和软件开发公司的全球性企业正式推出企业以太坊联盟（EEA），致力于将以太坊开发成企业级区块链。这些企业包括英国石油巨头BP、摩根大通、软件开发商微软、埃森哲、桑坦德银行、BlockApps、BNY梅隆、芝商所、ConsenSys、英特尔微软和Nuco等。许多企业或组织开发基于以太坊区块链的项目，并发行代币。联合国世界粮食计划署成功使用以太坊区块链向10000难民提供救助。
          </p>
          <p
            v-if="linesColor=='2'"
          >莱特币诞生于2011年11月9日，被称为是“数字白银”。莱特币在技术上和比特币具有相同的实现原理。它是第一个基于Scrypt算法的网络数字货币，与比特币相比，莱特币拥有更快的交易确认时间，更高的网络交易容量和效率。莱特币现在拥有完整的产业链，充分的流动性，足以证明其是成熟、安全、稳定的商用金融系统。</p>
          <p v-if="linesColor=='3'">
            沪深300指数
            沪深300指数是由上海和深圳证券市场中市值大、流动性好的300只A股作为样本编制而成的成份股指数，具有良好的市场代表性。沪深300指数是沪深证券交易所第一次联合发布的反映A股市场整体走势的指数。它的推出，丰富了市场现有的指数体系，增加了一项用于观察市场走势的指标，有利于投资者全面把握市场运行状况，也进一步为指数投资产品的创新和发展提供了基础条件。
          </p>
          <p v-if="linesColor=='4'">
            中证500指数
            中证500指数是根据科学客观的方法，挑选沪深证券市场内具有代表性的中小市值公司组成样本股，以便综合反映沪深证券市场内中小市值公司的整体状况。其样本空间内股票扣除沪深300指数样本股及最近一年日均总市值排名前300名的股票，剩余股票按照最近一年（新股为上市以来）的日均成交金额由高到低排名，剔除排名后20%的股票，然后将剩余股票按照日均总市值由高到低进行排名，选取排名在前500名的股票作为中证500指数样本股。
          </p>
        </div>
      </div>
      <div id="mainRight">
        <kLine></kLine>
      </div>
    </div>
    <div class="table">
      <tableList></tableList>
    </div>
  </div>
</template>
<script>
import { infosGoodsGetlist, accountGet } from "../../api/api";
import kLine from "./kline";
import tableList from "./tableList";
import { mapState } from "Vuex";
export default {
  name: "all",
  data() {
    return {
      totalAssets: ["1"],
      list: [],
      balance: "",
      linesColor: 0
    };
  },
  computed: {
    ...mapState([
      "getMoney",
      "user",
      "BTCUSDT",
      "ETHUSDT",
      "LTCUSDT",
      "IC500USDT",
      "HS300USDT"
    ])
  },
  components: {
    kLine,
    tableList
  },
  created() {
    if (this.user != null) {
      this.getUse();
      this.getList();
    }

    // setInterval(()=>{
    //     this.timing();
    // },5000)
  },
  methods: {
    // timing() {
    //     infosGoodsGetlist().then(res => {
    //         this.list = res.data.data;
    //     });
    // },
    getList() {
      infosGoodsGetlist().then(res => {
        this.list = res.data.GoodsItem;
        console.log(this.list);
        this.$store.commit("product", JSON.stringify(res.data.GoodsItem[0]));
        //   if(this.list.name == "HS300/USDT"){
        //     var bi = "IFL/USDT"
        // }else if(this.list.name == "IC500/USDT"){
        //     var bi = "ICL/USDT"
        // }else{
        //     var bi = res.data.GoodsItem[0].name
        // }
        var bi = res.data.GoodsItem[0].name;
        $("#tradingViews")[0].contentWindow.window.tvWidget.setSymbol(bi, "5");
      });
    },
    getRow(val, i) {
      this.linesColor = i;
      this.$store.commit("product", JSON.stringify(val));
      // if(val.name == "HS300/USDT"){
      //     var bi = "IFL/USDT"
      // }else if(val.name == "IC500/USDT"){
      //     var bi = "ICL/USDT"
      // }else{
      //     var bi = val.name
      // }
      var bi = val.name;
      console.log(bi);
      $("#tradingViews")[0].contentWindow.window.tvWidget.setSymbol(bi, "5");
    },
    //获取可用
    getUse() {
      var params = {
        guid: this.$allId.guid,
        loginId: this.user.Customer.loginId,
        sessionId: this.user.SessionId
      };
      accountGet(params).then(res => {
        this.balance = res.data.Balance;
        this.$store.commit("getMoney", JSON.stringify(res.data));
      });
    }
  },
  filters: {
    pointFour(val) {
      return Number(val).toFixed(4);
    }
  }
};
</script>
<style lang='less' scoped>
@color1: #162235;
@color2: #8b91b1;
@color3: #1b273b;
@line: #1e2b40;
@color4: #111d2d;
@color5: #1a273a;
.titles{
  background-color: @color5;
  padding: 10px 0;
}
.all {
  background-color: @color5;
  padding-bottom: 10px;
  box-sizing: border-box;
  .table {
    margin: 0 10px;
    background: @color4;
  }
}
.introduction {
  padding: 0 10px 10px;
  box-sizing: border-box;
  p {
    word-wrap: break-word;
    color: #8b91b1;
    text-indent: 2rem;
    font-size: 12px;
    line-height: 20px;
  }
}
#cmain {
  position: relative;
  padding: 10px;
  box-sizing: border-box;
  #mainLeft {
    height: 805px;
    background: @color4;
    width: 280px;
    position: absolute;
    left: 10px;
    top: 10px;
    border: 1px solid @line;
  }
  #mainRight {
    padding-left: 290px;
    box-sizing: border-box;
  }
}

.red {
  color: #be4662 !important;
}
.white {
  color: #fff !important;
}
.green {
  color: #35b8a7 !important;
}
.lines {
  color: @color2;
  padding: 10px;
  box-sizing: border-box;
  > li {
    margin-bottom: 10px;
    font-size: 12px;
  }
}
/deep/.el-table th > .cell {
  font-size: 10px;
}
/deep/.el-table_1_column_2 > div {
  text-align: right;
}
/deep/.el-table_1_column_3 > div {
  text-align: right;
}
/deep/.el-table .cell {
  font-size: 12px;
  color: @color2;
}
/deep/.el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar {
  display: none;
}
/deep/.has-gutter th {
  padding: 1px 0 !important;
}
/deep/.el-table td,
.el-table th {
  padding: 3px 0 !important;
}
/deep/.el-table td,
.el-table th.is-leaf {
  border-bottom: 0;
}
/deep/.el-collapse-item__header {
  height: 35px;
  line-height: 35px;
}
/deep/.el-collapse-item__content {
  padding-bottom: 10px;
}
/deep/.el-collapse-item__header {
  background-color: @color4;
  color: @color2;
  border: 0;
  padding: 0 5px;
  box-sizing: border-box;
}
/deep/.el-collapse-item__content {
  background-color: @color1;
  color: #fff;
  padding: 5px 5px;
  box-sizing: border-box;
}
/deep/.el-collapse-item__wrap,
.el-collapse {
  border: 0;
}

/deep/.el-table--striped
  .el-table__body
  tr.el-table__row--striped.current-row
  td,
.el-table__body tr.current-row > td {
  background-color: #a0cfff;
}

/deep/.el-table--striped
  .el-table__body
  tr.hover-row.el-table__row--striped
  > td,
.el-table__body tr.hover-row > td {
  background-color: #d9ecff !important;
}
</style>